<template>
  <u-navbar
      title="我的团员"
      placeholder
      titleStyle="color:white"
      leftIconColor="#fff"
      auto-back
      bgColor="#FF7540"
      @left-click="goBack"
  >
  </u-navbar>
  <view class="big_box">
    <!--团员统计、创收总额统计-->
    <view class="top_member">
      <view class="person_num">
        <view class="left_box">
          <view class="num">{{ spread_people_num ? spread_people_num : 0 }}</view>
          <view class="p_text">团员人数</view>
        </view>
        <view class="left_box">
          <view class="num">{{ spread_money ? spread_money : 0 }}</view>
          <view class="p_text">创收总额</view>
        </view>
      </view>
      <!--搜索-->
      <view class="search_box">
        <view class="search_interval">
          <view class="search_interval_text">日期选择：</view>
          <view @tap="checkInterval" class="search_interval_int">
            <u-icon name="calendar" size="18" color="#ffffff" ></u-icon>
            <view class="search_interval_text">{{ intervalText }}</view>
            <!--customDate自定义日期-->
            <u-calendar
                :show="showInterval"
                mode="range" round="20"
                :defaultDate="defaultDate"
                :minDate="startDate"
                :maxDate="endDate"
                customDate="customDate"
                monthNum="24"
                maxRange="360"
                @confirm="confirmInterval"
                @close="intervalClose"
                @reset="resetPage"
            ></u-calendar>
          </view>
        </view>
        <view class="search_content">
          <view class="input_box">
            <u-input :customStyle="{padding: '10rpx 168rpx 10rpx 30rpx', backgroundColor:'#FFFFFF', border: scrollTop > 10 ? '1px solid #FF7F14': '', }" fontSize="26rpx"
                     type="text"
                     border="none"
                     prefixIcon="search"
                     prefixIconStyle="color:#AEAEAE;"
                     confirmType="search" @confirm="toSearch()" :focus='false'
                     shape="circle" placeholder="请输入用户名、手机号、昵称查找团员" v-model="keyword" ref="myInput"/>
          </view>
          <view class="sousuo_btn" @click="toSearch()">搜索</view>
        </view>
      </view>
    </view>
    <view class="detail_content">
      <view class="g_name">
        <view class="l_text">
          有效团员共
          <text>{{ effectiveData || 0 }}</text>
          位
        </view>
      </view>
      <view class="small_group" v-for="(item, index) in memberData" :key="index">
        <view class="l_user">
          <view class="l_img">
            <img :src="item.avatar" alt="">
          </view>
          <view class="l_infor">
            <view style="display: flex;align-items: center">
              <view class="name">{{ item?.nickname }}</view>
              <view v-if="item?.binding_new === 0" style="margin-left: 15rpx;border:  #ff7400 1px solid;border-radius: 7rpx;padding: 1rpx 10rpx;font-size: 22rpx;color: #ff7400">老</view>
            </view>
            <view class="fisih_text">已完成{{ item.order_num }}单</view>
            <view class="fisih_time">{{ item.create_time }}</view>
          </view>
        </view>
        <view class="r_price">
          <view class="price">{{ item.amount || 0 }}</view>
          <view class="p_text">创收总额(元)</view>
        </view>
      </view>
      <view class="more_text">{{ more_text }}</view>
      <!--滚动到顶部-->
      <view v-if="scrollTop > 80" @tap="goScrollTop" class="scroll_top">
        <image :src="BaseImgUrl + '/images/top_icon.png'" mode="widthFix" style="width: 68rpx;height: 68rpx;"></image>
      </view>
    </view>
  </view>
</template>
<script setup>
import {onLoad, onPageScroll, onPullDownRefresh, onReachBottom} from "@dcloudio/uni-app";
import {ref} from "vue";
import {getMyMembersPageAPI} from "../../services/makeMoney";
import {getDate} from "@dcloudio/uni-ui/lib/uni-datetime-picker/util";
import {BaseImgUrl} from "../../utils/lshttp";

// 我的团员
const memberData = ref([])
// 我的有效团员
const effectiveData = ref()
const page = ref(1)
const limit = ref(10)
const _len = ref(0)
const type = ref(1)
const spread_money = ref(0)
const spread_people_num = ref(0)

const more_text = ref('上拉加载更多……')

onLoad((options) => {
  console.log("options--->>>", options)
  /* if (options.spread_money) {
    spread_money.value = options.spread_money
  }
  if (options.spread_people_num) {
    spread_people_num.value = options.spread_people_num
  } */
  handleRankList()
})
onReachBottom(() => {
  if (_len < limit.value) {
    page.value = 1
  } else {
    page.value++
    handleRankList()
  }
})

onPullDownRefresh(() => {
  page.value = 1
  handleRankList()
})

const handleRankList = async (search) => {
  await getMyMembersPageAPI({
    limit: limit.value,
    page: page.value,
    keyword: keyword.value,
    interval: interval.value
  }).then(res => {
    _len.value = res.result.list.length
    // 获取有效团员valid_num
    effectiveData.value = res.result.valid_num
    // 搜索重新赋值头部团员人数
    spread_people_num.value = res.result.total
    // 创收总额
    spread_money.value = res.result.income_money
    // 判断搜索结果是否有值提示
    if (search){
      // 搜索重新赋值头部团员人数
      spread_people_num.value = res.result.total
      // 创收总额
      spread_money.value = res.result.income_money
      // 获取有效团员valid_num
      effectiveData.value = res.result.valid_num
      if (res.result.list.length > 0){
        uni.showToast( {
          title: '数据已加载完毕',
          icon: 'none',
          duration: 1500
        })
      } else {
        uni.showToast( {
          title: '查询无数据，请重新输入信息查询~',
          icon: 'none',
          duration: 1500
        })
      }
    }
    if (page.value === 1) {
      memberData.value = res.result.list
    } else {
      memberData.value = [...memberData.value, ...res.result.list]
    }
    console.log('我的团员列表=', memberData.value)

    if (_len.value === 0) {
      more_text.value = '暂无数据~'
      return
    }
    if (_len.value < limit.value) {
      more_text.value = '没有更多数据~'
    } else {
      more_text.value = '上拉加载更多……'
    }
  }).catch(err => {
    console.log('err--->>>', err)
    uni.showToast({
      title: err.msg,
      icon: 'none',
    });
  })
}
// 区间
const interval = ref()
// 当前日期
const defaultDate = [new Date().setDate(new Date().getDate()),new Date().setDate(new Date().getDate() + 3)]
const startDate = new Date().setDate(new Date().getDate() - 360)
const endDate = new Date().setDate(new Date().getDate() + 30)
const intervalText = ref('请选择日期')
const showInterval = ref(false);
const checkInterval = () => {
  showInterval.value = true
}
const confirmInterval = (e) => {
  console.log(e)
  startTime.value = e[0]
  endTime.value = e[e.length - 1]
  if (e.length === 1){
    intervalText.value = e[0]
    interval.value = e[0]
  } else {
    intervalText.value = e[0] + '至' +  e[e.length - 1]
    interval.value = e[0] + "," + e[e.length - 1]
  }


  showInterval.value = false
}
const intervalClose = () => {
  showInterval.value = false
}

// 日期事件组件key
const calendarKey = ref(0)
// 时间重置，目前实现刷新页面达到重置内容
const resetPage = () => {
  console.log('页面刷新')
  showInterval.value = false
  // 刷新页面
  uni.redirectTo( {
    url: '/pages/makemoney/mygroup',
  })
}
// 收拾关键字
const keyword = ref('')
const startTime = ref()
const endTime = ref()
// 跳转搜索
const toSearch = () => {
  let search = 'search'
  // 查询重置page页数1
  page.value = 1
  handleRankList(search);
}
// 监听页面滚动
const scrollTop = ref(0)
onPageScroll(e => {
  // console.log('滚动=', e)
  scrollTop.value = e.scrollTop

})
// 返回顶部
const goScrollTop = () => {
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 300
  })
}
// 返回上一个页面
const goBack = () => {
  uni.switchTab({url: '/pages/makemoney/mygroup'})
}

</script>
<style lang="scss">
page {
  background-color: #F6F6F6;
}

.u-status-bar,
.u-navbar__content {
  background-image: linear-gradient(90deg, #FC5722, #FF7540, #FF7540, #FF7540);
  color: rgb(255, 117, 64);
}
</style>
<style lang="scss" scoped>

image {
  width: 100%;
  height: 100%;
}

.top_member {
  width: 100%;
  height: 400rpx;
  background: url('https://lsz.lszbg.com/imgs/group/top_bg.png') no-repeat top center / 100%;
  position: relative;
  box-sizing: border-box;
  padding: 0 30rpx;

  .member_title {
    font-size: 44rpx;
    color: #fff;
    font-weight: bold;
    text-align: center;
    position: relative;

    &:before {
      content: '';
      display: inline-block;
      position: absolute;
      top: 10rpx;
      left: 30rpx;
      width: 28rpx;
      height: 49rpx;
      background: url('https://lsz.lszbg.com/imgs/group/return_icon.png') no-repeat top center / 100%;
    }
  }

  .person_num {
    display: flex;
    justify-content: space-around;
    padding-top: 30rpx;
    text-align: center;

    .left_box {
      .num {
        font-size: 36rpx;
        color: #fff;
        font-weight: bold;
      }

      .p_text {
        font-size: 28rpx;
        color: #FFEAE2;
        margin-top: 5rpx;
      }
    }
  }
  /* 查询内容css */
  .search_box {
    margin-top: 20rpx;
    .search_interval{
      display: flex;
      align-items: center;

      padding: 20rpx 0;
      .search_interval_text{
        font-size: 24rpx;
        color: #FFFFFF;
      }
      .search_interval_int{
        padding-left: 10rpx;
        display: flex;
        align-items: center;
      }
    }
    .search_content{
      position: relative;
      display: flex;
      align-items: center;
      .input_box {
        border-radius: 200rpx;
        width: 100%;
      }
      .sousuo_btn {
        background: linear-gradient( 270deg, #FF7F14 0%, #FF5429 100%);
        border-radius: 200rpx;
        color: #FFFFFF;
        position: absolute;
        right: 6rpx;
        width: 118rpx;
        height: 53rpx;
        line-height: 53rpx;
        font-size: 26rpx;
        text-align: center;
      }
    }

  }
}

.detail_content {
  background: linear-gradient(179deg, #FFFFFF 0%, #F1F1F1 100%);
  border-radius: 50rpx 50rpx 0 0;
  margin-top: -100rpx;
  position: relative;
  box-sizing: border-box;
  padding: 30rpx;

  .g_name {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .l_text {
      font-size: 26rpx;
      color: #888;

      text {
        font-size: 28rpx;
        color: #FC754A;
        font-weight: bold;
        margin: 0 10rpx;
      }
    }

    .r_text {
      font-size: 26rpx;
      color: #999;
    }
  }
  .day_tabs {
    border-bottom: 1rpx solid #E6E6E6;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 20rpx;

    text {
      position: relative;
      margin-right: 92rpx;
      font-size: 36rpx;
      color: #888;

      &:after {
        content: '';
        display: inline-block;
        width: 144rpx;
        height: 8rpx;
        background-color: #fff;
        border-radius: 20rpx;
        position: absolute;
        bottom: -20rpx;
        left: 0;
        right: 0;
        margin: auto;
      }

      &.cur {
        color: #FC5722;

        &:after {
          background: linear-gradient(90deg, #FC754A 0%, #FDC434 100%);
        }
      }
    }
  }
}

.more_text {
  font-size: 28rpx;
  color: #B1B1B1;
  text-align: center;
  margin-top: 56rpx;
}

.small_group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40rpx;
  border-bottom: 2rpx dashed #DCDCDC;
  box-sizing: border-box;
  padding-bottom: 40rpx;

  .l_user {
    display: flex;
    align-items: center;
    width: 75%;

    .l_img {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 26rpx;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .l_infor {
      width: 70%;

      .name {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .fisih_text {
        font-size: 24rpx;
        color: #888;
        margin-top: 5rpx;
      }
      .fisih_time{
        font-size: 24rpx;
        color: #888;
        margin-top: 5rpx;
      }
      &.z_infor {
        width: 70%;
      }
    }

    &.z_user {
      width: 50%;
    }
  }

  .fisih_text {
    font-size: 24rpx;
    color: #888;
    margin-top: 5rpx;
  }

  .r_price {
    text-align: right;

    .price {
      font-size: 28rpx;
      color: #FC4106;
      font-weight: bold;
    }

    .p_text {
      font-size: 24rpx;
      color: #888;
    }
  }
}
/* 返回顶部css */
.scroll_top{
  width: 72rpx;
  height: 72rpx;
  position: fixed;
  right: 20rpx;
  bottom: 200rpx;
  z-index: 99;

}
</style>
